<template>
  <Header></Header>
  <Navswiper></Navswiper>
  <div ref="target">
    <NewCourse v-if="targetVisiable"></NewCourse>
  </div>
  <Footer></Footer>
</template>

<script setup>
import { useIntersectionObserver } from "@vueuse/core";
import { defineAsyncComponent, ref } from "vue";

import Header from "@/components/Header/index.vue";
import Navswiper from "@/components/Navswiper/index.vue";
// import NewCourse from "@/components/NewCourse/index.vue";
import Footer from "@/components/Footer/index.vue";

const NewCourse = defineAsyncComponent(() => import("@/components/NewCourse/index.vue"));
const target = ref(null);
const targetVisiable = ref(false);

const { stop } = useIntersectionObserver(target, ([{ isIntersecting }]) => {
  if (isIntersecting) {
    targetVisiable.value = isIntersecting;
  }
});
</script>
